<script setup>
  const openNewTab = (url) => {
    window.open(url, '_blank');
  }
</script>

<template>
  <div class="products_box">
    <div class="title wow animate__animated animate__fadeInUp">Products</div>
    <div class="content">
      <div class="top">
        <div class="left wow animate__animated animate__fadeInUp">
          <div class="title_h">
            ZKC<br/>Development Kit
          </div>
          <div class="text">
            The ZKC Node is a cutting-edge 
            infrastructure component designed to
            revolutionize the development of
            decentralized applications (dApps) across
            various domains. As a core element of the
            ZKCross development framework, it
            empowers developers to create scalable,
            secure, and verifiable blockchain-based
            solutions with ease.
          </div>
        </div>
        <div class="right">
          <div class="example_item">
            <div class="withe_bg wow animate__animated animate__fadeInUp">
              <div>
                <img src="@/assets/images/products_1.png" alt="">
              </div>
              <div class="tag">Modular<br/>Architecture</div>
              <div class="text_des">
                Our modular design allows for flexible 
                integration and seamless upgrades, ensuring 
                your dApp can evolve with the latest 
                blockchain innovations.
              </div>
            </div>
            <div class="wow animate__animated animate__fadeInUp">
              <div>
                <img src="@/assets/images/products_2.png" alt="">
              </div>
              <div class="tag">Enhanced User<br/>Experience</div>
              <div class="text_des">
                By optimizing backend processes, ZKC Node
                significantly improves transaction speed and
                reduces costs, resulting in a smoother user
                experience.
              </div>
            </div>
            <div class="withe_bg wow animate__animated animate__fadeInUp">
              <div>
                <img src="@/assets/images/products_5.png" alt="">
              </div>
              <div class="tag">Zkwasm<br/>Integration</div>
              <div class="text_des">
                Leverage the efficiency of WebAssembly and  
                the security of zero-knowledge proofs for
                complex computations.
              </div>
            </div>
          </div>
          <div class="example_item">
            <div class="mar_top wow animate__animated animate__fadeInUp">
              <div>
                <img src="@/assets/images/products_3.png" alt="">
              </div>
              <div class="tag">Scalability</div>
              <div class="text_des">
                Built to handle high transaction volumes, 
                ensuring your dApp performs well as it grows.
              </div>
            </div>
            <div class="mar_top withe_bg wow animate__animated animate__fadeInUp">
              <div>
                <img src="@/assets/images/products_4.png" alt="">
              </div>
              <div class="tag">Interoperability</div>
              <div class="text_des">
                Easily connect with various blockchain  
                networks and protocols, expanding your dApp's
                reach and functionality.
              </div>
            </div>
            <div class="mar_top wow animate__animated animate__fadeInUp">
              <div>
                <img src="@/assets/images/products_6.png" alt="">
              </div>
              <div class="tag">Robust State<br/>Management</div>
              <div class="text_des">
                Maintain consistent and verifiable application states across decentralized networks.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="left wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/canves_bg.jpg" alt="">
          <div @click="openNewTab('https://zkvrf.xyz/')" class="click_dom"></div>
        </div>
        <div class="right">
          <div class="r_title wow animate__animated animate__fadeInUp">ZkVRF</div>
          <div class="des wow animate__animated animate__fadeInUp">
            zkVRF (Zero-Knowledge Verifiable Random Function) is a decentralized system for generating verifiable, tamper-resistant random numbers. It combines zero-knowledge proofs with distributed signing to provide secure and scalable randomness for applications requiring high integrity. ZkVRF addresses limitations of existing approaches, offering a trustless solution for various use cases needing reliable random number generation.
          </div>
          <div class="but wow animate__animated animate__fadeInUp">
            <div class="item">
              <div class="img">
                <img src="@/assets/images/products_01.png" alt="">
              </div>
              <div class="line"></div>
              <div class="text">
                Trustless VRF Via ZKP
              </div>
            </div>
            <div class="item">
              <div class="img">
                <img src="@/assets/images/products_02.png" alt="">
              </div>
              <div class="line"></div>
              <div class="text"> 
                Easy To Use In Applications
              </div>
            </div>
            <div class="item">
              <div class="img">
                <img src="@/assets/images/products_03.png" alt="">
              </div>
              <div class="line"></div>
              <div class="text">
                Decentralized With Any Participants To Join
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@media screen and (max-width: 1350px) {
  .products_box {
    .content {
      .bottom {
        .right {
          .but {
            .item {
              .text {
                font-size: 16px !important;
              }
            }
          }
        }
        .left {
          img {
            height: 75% !important;
          }
        }
      }
    }
  }
}
.products_box {
  .title {
    font-weight: 600;
    font-size: 40px;
    color: #000000;
    padding-left: 2.6%;
  }
  .content {
    margin-top: 3.2%;
    background: #F7F7F7;
    border-radius: 20px;
    border: 1px solid #DEDEDE;
    width: 100%;
    box-sizing: border-box;
    padding: 3.54% 2.6%;
    .bottom {
      margin-top: 3.14%;
      background: #D4DAE0;
      border-radius: 15px;
      padding: 2.79% 3.11%;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      .left {
        display: flex;
        width: 37.82%;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .click_dom {
          position: absolute;
          z-index: 1;
          height: 11%;
          width: 25%;
          bottom: 0px;
          left: 25%;
          cursor: pointer;
        }
      }
      .right {
        margin-left: 20px;
        flex: 1;
        .r_title {
          font-weight: 600;
          font-size: 40px;
          color: #000000;
        }
        .des {
          font-weight: 300;
          font-size: 18px;
          color: #000000;
          margin-top: 22px;
          line-height: 30px;
        }
        .but {
          display: flex;
          margin-top: 35px;
          .item {
            background: #7C8B9A;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            align-items: center;
            margin-right: 20px;
            box-sizing: border-box;
            &:first-child {
              width: 28%;
            }
            &:nth-child(2) {
              width: 32%;
            }
            &:last-child {
              width: 40%;
              margin-right: 0px
            }
            .img {
              display: flex;
              align-items: center;
              img {
                width: 30px;
              }
            }
            .line {
              width: 1px;
              height: 25px;
              background-color: #0B344B;
              margin-left: 10px;
            }
            .text {
              color: #Fff;
              font-size: 18px;
              line-height: 25px;
              margin-left: 10px;
              word-break: break-all;
            }
          }
        }
      }
    }
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .left {
        background-image: linear-gradient(to bottom right, #010C22, #0B354D);
        width: 24%;
        min-width: 400px;
        border-radius: 15px;
        padding: 1.7% 1.8%;
        box-sizing: border-box;
        color: #fff;
        .title_h {
          font-size: 40px;
          line-height: 48px;
        }
        .text {
          font-size: 20px;
          margin-top: 20px;
          font-weight: 300;
          line-height: 30px;
        }
      }
      .right {
        width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .example_item {
          display: flex;
          .withe_bg {
            background-color: #fff;
            border-radius: 15px;
          }
          >div {
            padding: 1.78% 2.08% 1.98% 2.08%;
            box-sizing: border-box;
            flex: 1;
            margin-right: 18px;
            &:last-child {
              margin-right: 0px;
            }
          }
          .mar_top {
            margin-top: 10px
          }
          .tag {
            font-weight: 500;
            font-size: 24px;
            line-height: 30px;
            color: #0B344B;
            margin-top: 6.27%;
          }
          .text_des {
            font-weight: 400;
            font-size: 14px;
            color: #474C42;
            margin-top: 13px;
            line-height: 17px;
          }
          img {
            width: 50px;
          }
        }
      }
    }
  }
}
</style>
